<template>
    <!-- 列表表头行 -->
    <header class="header">
        <span class="title">PDB ID</span>
        <span class="title">LIGANDS</span>
        <span class="title">DOCKING ENERGY(kJ/mol)</span>
        <span class="title">INTERACTION ENERGY(kJ/mol)</span>
    </header>
    <!-- 列表内容 -->
    <el-scrollbar
        :always="true"
        :min-size="50"
    >
        <!-- 列表渲染复合物结构条目信息 -->
        <div v-for="value,key in itemList" class="list-item">
            <!-- 结构的PDB登录号 -->
            <span class="id" @click="handleClick(key)">
                {{ key }}
            </span>
            <!-- 结构的配体列表 -->
            <span class="ligand">
                {{ (value as ComplexItem).Ligands }}
            </span>
            <!-- 结构的对接能 -->
            <span class="energy">
                {{ value['Docking Energy'] }}
            </span>
            <!-- 结构的互作能 -->
            <span class="energy">
                {{ value['Interaction Energy'] }}
            </span>
        </div>
    </el-scrollbar>
</template>

<script lang="ts" setup>
import { ref } from 'vue';
import { useRouter } from 'vue-router';
// 导入全局状态-数据库条目
import { useEntryStore } from '../stores/entry';

// 定义数据库复合物结构条目类型
interface ComplexItem{
    Title:string,
    Classification:string,
    Source:string,
    Mutation:string,
    'Experimental Method':string,
    Resolution:string,
    'Dot-Bracket':string,
    Ligands:string,
    'Binding Affinity':string|null,
    'Affinity Reference':string|null,
    'NALDB ID':string|null,
    'Refernce DOI':string|null,
    'Reference PMID':string|null,
    'Docking Energy':string|null,
    'Interaction Energy':string|null
}
// 定义复合物结构条目列表类型
interface ComplexItemList{
    (index:string):ComplexItem
}
// 初始化列表
const itemList=ref({} as ComplexItemList);
// 从后台数据库中读取并加载复合物结构条目列表
window.electronAPI.browse().then((result:JSON)=>{
    itemList.value=(result as any).complexes;
});
// 使用路由
const router=useRouter();
// 使用全局状态-数据库条目
const entry=useEntryStore();
// 点击事件回调函数
function handleClick(info:string):void{
    // 更新全局状态-数据库条目
    entry.update(info);
    // 路由跳转到数据库条目页面
    router.push({
        path:'entry'
    });
}
</script>

<style lang="scss" scoped>
/* 表头行样式布局 */
.header{
    display:flex;
    justify-content: space-between;
    border-bottom: 0.8vh white solid;
    height:10vh;
    width:90vw;
    text-align: center;
    align-items: center;
    font-size:2.5vw;
    font-weight: bold;
}
/* 列表项样式布局 */
.list-item{
    font-size:2.5vw;
    height:8vh;
    width:90vw;
    text-align: center;
    align-items: center;
    display:flex;
    justify-content: space-between;
    border-bottom: 0.5vh white dashed;
}
/* 标题/PDB登录号/配体列表/能量项宽度 */
.title,.id,.ligand,.energy{
    width:20vw;
}
/* PDB登录号的鼠标悬浮样式 */
.id:hover{
    cursor: pointer;
    color:blue;
}
</style>
